<template>
	<div class="toolBar">
		<div class="block">
			<p style="margin-right:5px;display: inline;font-size:15px">类型:</p>
			<el-select class="selectOpera" v-model="selectOpera" @change="selectOperaFn">
				<el-option v-for="item in operaOption" :key="item.value" :label="item.label" :value="item">
				</el-option>
			</el-select>
			<!-- 二级 -->
			<!-- <el-input
				class="inputFilter"
				clearable
				prefix-icon="el-icon-search"
				v-show="inputFilter.show"
				v-model="inputFilter.data"
				:placeholder="inputFilter.placeholder"
			>
			</el-input> -->
			<p v-show="inputFilter.show" style="display: inline;font-size:15px">文件挂载点:</p>
			<el-select v-show="inputFilter.show" v-model="operaOption[1].filter.data" placeholder="文件挂载点"
				@change="otherInputFilter">
				<el-option v-for="item in operaOption[1].filter.options" :key="item.value" :label="item.label"
					:value="item.value">
				</el-option>
			</el-select>
			<p style="margin-right:5px;display: inline;font-size:15px">开始日期:</p>
			<el-date-picker class="blockStart" v-model="pickerDate.StartTime" type="datetime" placeholder="开始日期"
				:picker-options="pickerOptions" :clearable="false"
				@change="changePickerDate(pickerDate.StartTime, 'StartTime')">
			</el-date-picker>
			<p style="margin-right:5px;display: inline;font-size:15px">结束日期:</p>
			<el-date-picker class="blockEnd" v-model="pickerDate.EndTime" type="datetime" placeholder="结束日期"
				:picker-options="pickerOptions" :clearable="false"
				@change="changePickerDate(pickerDate.EndTime, 'EndTime')">
			</el-date-picker>
			<!-- <span v-show="!inputFilter.show">
        <i style="font-style: normal; font-size: 14px" v-show="isShowfre"
          >请选择时间间隔:</i
        ><el-select
          v-model="fre"
          v-show="isShowfre"
          @change="IntervalOperaFn"
          clearable
          placeholder="请选择时间间隔"
        >
          <el-option
            v-for="item in IntervalOption"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select>
      </span> -->
			<span>
				<!-- v-show="isShowfre" -->
				<el-button :disabled="toolBarDisabled" type="primary" size="medium" plain @click="sendPickerDate">
					查询
				</el-button>
				<!-- <el-button type="primary" @click="handleExport" round> 导出 </el-button> -->
			</span>
		</div>

		<div class="tableTool">
			<!-- <el-tooltip content="筛选列" placement="top" effect="dark">
                <el-popover
                    placement="left-start"
                    width="100"
                    trigger="click">
                    <el-checkbox-group 
                        id="myCheckboxGroup"
                        v-model="checkedArr" 
                        @change="handleChange">
                        <el-checkbox v-for="item in tableColumns"
                            :label="item.label"
                            :key="item.prop" 
                            style="display:block;">
                            {{item.label}}
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-button
                        class="btnLie"
                        icon="el-icon-jk-lie"
                        slot="reference">
                    </el-button>
                </el-popover>
            </el-tooltip> -->
			<el-tooltip content="导出" placement="top" effect="dark">
				<!-- <vJsonExcel :data="tableData" :name="'fileName'+.xls">
					<el-button icon="el-icon-download" circle title="导出" @click="aa"></el-button>
				</vJsonExcel> -->
				<download-excel class="downExcel" type="xls" :data="tableData" :fields="tableDataFields"
					:name="fileName+'.xls'">
					<el-button class="btnExport" icon="el-icon-jk-export" @click="aa">
					</el-button>
				</download-excel>
			</el-tooltip>
		</div>
	</div>
</template>

<script>
	import bus from "common/bus.js";
	import moment from 'moment';
	import vJsonExcel from 'vue-json-excel';
	export default {
		props: [
			"tableColumns",
			"tableData",
			"tableDataFields",
			"operaOption",
			"toolDisabled",
			"isShowfre",
			"fileName"
		],
		components:{
			vJsonExcel
		},
		computed: {},
		data() {
			return {
				level: [{
						value: 3,
						label: "紧急"
					},
					{
						value: 2,
						label: "普通"
					},
					{
						value: 1,
						label: "提醒"
					},
				],
				IntervalOption: [{
						value: "1",
						label: "1分钟",
					},
					{
						value: "5",
						label: "5分钟",
					},
					{
						value: "10",
						label: "10分钟",
					},
					{
						value: "30",
						label: "30分钟",
					},
					{
						value: "60",
						label: "60分钟",
					},
					{
						value: "120",
						label: "120分钟",
					},
				],
				loading: false,
				inputFilterOptions: [],
				changeLie: "",
				selectOpera: {},
				fre: {
					value: 1,
					label: "1分钟",
				},
				inputFilter: {
					filterKey: "",
					data: "",
					show: false,
					placeholder: "",
					options: []
				},
				checkedArr: [],
				toolBarDisabled: false,
				pickerDateTime: {},
				// thisTime:,
				pickerDate: {
					// 更改开始时间
					StartTime: new Date(moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss")),
					// StartTime:'',
					EndTime: new Date(),
				},
				//禁止选未来时间
				pickerOptions: {
					disabledDate: (time) => {
						return time.getTime() > Date.now();
					},
				},
				pickerOptionLase: {
					disabledDate: (time) => {
						return time.getTime() > Date.now() && time.getTime() && time.getTime() < this.pickerDate
							.StartTime;
					},
				},
			};
		},
		created() {
			this.initOperaDate();
			this.initPickerDate();
			this.initIntervalDate();
			this.initStartTIme();
			// this.initinputFilter();
		},
		computed: {},
		methods: {
			aa(){
				console.log(555,this.tableData);
			},
			initOperaDate() {
				this.selectOpera = this.operaOption[0];

				this.$emit("selectOpera", this.selectOpera);
			},
			initStartTIme() {
				this.pickerDate.StartTime = new Date(moment().subtract(30, "days").format("YYYY-MM-DD HH:mm:ss"));
				this.pickerDate.EndTime = new Date();
			},
			initPickerDate() {
				let _json = {};

				for (const key in this.pickerDate) {
					const element = this.pickerDate[key];
					_json[key] = this.formatDate(element);
				}

				this.$emit("pickerDate", _json);
			},
			initIntervalDate() {
				this.fre = this.IntervalOption[0];

				this.$emit("intervalOpera", this.fre);
			},
			// initinputFilter() {
			//   console.log(this.operaOption[2])
			// 	this.inputFilterOptions = this.operaOption[2].filter.options;
			// 	this.$emit("selectOpera", this.selectOpera);
			// },
			updateCheckedArr() {
				this.tableColumns.forEach((element, index) => {
					if (element.isShow) {
						this.checkedArr.push(element.label);
					}
				});
			},
			selectOperaFn(item) {
				this.$emit("selectOpera", item);
				this.sendPickerDate()
			},
			IntervalOperaFn(item) {

				this.$emit("intervalOpera", item);
				this.sendPickerDate()
			},
			handleChange(val) {
				this.changeLie = val;
				this.$emit("changeLie", val);
			},
			// 选择时间
			changePickerDate(date, key) {
				this.pickerDateTime = {};

				this.pickerDateTime[key] = this.formatDate(date);

				this.$emit("pickerDate", this.pickerDateTime);
				this.sendPickerDate()
			},
			otherInputFilter(item) {
				this.$emit('ChangeFileSystemHistory', item)
			},
			sendPickerDate() {
				this.$emit("goSearch");
				// console.log('but',this.toolBarDisabled);
			},
			// 格式化时间
			formatDate(date) {
				let _time = "";

				if (date) {
					let _year = date.getFullYear().toString();
					let _month = (date.getMonth() + 1).toString().padStart(2, "0");
					let _day = date.getDate().toString().padStart(2, "0");
					let _hour = date.getHours().toString().padStart(2, "0");
					let _minute = date.getMinutes().toString().padStart(2, "0");
					let _second = date.getSeconds().toString().padStart(2, "0");

					_time =
						_year +
						"-" +
						_month +
						"-" +
						_day +
						" " +
						_hour +
						":" +
						_minute +
						":" +
						_second;
				}
				return _time;
			},
			handleExport() {
				let _data = {
					type: this.selectOpera.value,
				};
				this.$emit("exportData", _data);
				// location.href = _url;
			},
		},
		watch: {
			tableColumns: function() {
				this.updateCheckedArr();
			},
			selectOpera: async function(newVal, oldVal) {
				if (newVal.filter == "") {
					this.inputFilter = {
						filterKey: "",
						data: "",
						show: false,
						placeholder: "",
					};
				} else {
					this.inputFilter.show = true;

					// 后期可能有多级
					for (const key in newVal.filter) {
						if (newVal.filter.hasOwnProperty(key)) {
							const element = newVal.filter[key];
							this.inputFilter.filterKey = key;
							this.inputFilter.placeholder = element;


							// //2021 10 22
							// const element = newVal.filter[key];
							// this.inputFilter[key] = element
						}
					}
					// this.inputFilter.options = newVal.filter.options
					//  this.inputFilterOptions.data = await this.operaOption[2].filter.data
					// this.inputFilterOptions.options = await this.operaOption[2].filter.options
					// this.inputFilterOptions.mounted_on = await this.operaOption[2].filter.mounted_on

					// console.log(this.operaOption[2], this.inputFilterOptions, this.inputFilter)


				}
			},
			"inputFilter.data": function(newVal, oldVal) {
				if (this.inputFilter.filterKey) {
					let _data = {};
					_data[this.inputFilter.filterKey] = newVal;

					this.$emit("inputFilter", _data);
				}
			},
			toolDisabled: {
				handler(newValue, oldValue) {
					this.toolBarDisabled = newValue;
				},
				deep: true,
			},
		},
	};
</script>

<style scoped>
	.toolBar {
		overflow: hidden;
		margin-bottom: 14px;
	}

	.toolBar .searchBox {
		float: left;
	}

	.toolBar .searchBox .searchInput {
		display: inline-block;
		width: 240px;
		margin-right: 10px;
	}

	.toolBar .searchBox .selectLevel,
	.selectNodeType {
		display: inline-block;
		width: 150px;
		margin-right: 10px;
	}

	.toolBar .block {
		float: left;
	}

	.toolBar .block>* {
		margin-right: 10px;
	}

	.toolBar .block .selectOpera,
	.inputFilter {
		width: 150px;
	}

	.toolBar /deep/ .el-popper[x-placement^="bottom"] {
		margin-top: 63px;
	}

	.toolBar .tableTool {
		float: right;
	}

	.toolBar .tableTool .btnLie {
		margin-right: 10px;
	}

	.toolBar .tableTool .downExcel {
		display: inline-block;
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #5fb878;
		border-color: #5fb878;
	}

	#myCheckboxGroup /deep/ .el-checkbox {
		margin-bottom: 8px;
	}

	.selectOpera {
		margin-bottom: 10px;
	}
</style>
